Cursus Fireworks 4 


Deel 2 


Je website 
wordt een show! 


In de eerste aflevering van deze minicursus Fireworks leerden we een flitsende animatie 
maken, ze omzetten in een animated gif en automatisch de bijbehorende html-code genere- 
ren. Dat laatste is trouwens een van de sterke punten van Fireworks: je schrijft html-code en 
JavaScripts zonder dat je er ook maar een jota van moet kennen. In de tweede aflevering 
doen we nog schokkender dingen, zodat je website niet langer de plek is ‘waar de ster bleef 
stillestaan’. 


Plakjes snijden 


Een van de boeiendste mogelijkheden van 
Fireworks is dat het programma niet alleen 
het grafische werk doet, maar tegelijkertijd 
de html-code genereert die je nodig hebt om 
flitsende toepassingen en effecten te ma- 
ken. Laten we stap voor stap kijken hoe dat 
in zijn werk gaat. 

Om te beginnen gaan we leren ‘plakjes snij- 
den’. In het Fireworks-jargon heten die plak- 
jes ‘slices’. Wat is nu zo’n ‘slice’? Heel een- 
voudig gezegd: een tabel waarin je afbeel- 
ding heel precies geplaatst wordt. Wie dat 
ooit in html heeft geprobeerd, weet hoe 
moeilijk het is zo’n ingewikkelde tabel pre- 
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Figuur 2 


cies naar je 
hand te zetten. 
Fireworksdaar- | 717 
entegen draait 
er zijn hand | mz 
niet voor om. HEA 


Het gebeurt vol- oe) 


automatisch. Figuur 3 

Wat je vooraf 

moet weten: Fireworks maakt van je ‘can- 
vas’ (de werkruimte in je documentvenster) 
één grote tabel. Die kan je nadien in zijn ge- 
heel in je html-pagina invoegen. Alle ele- 
menten op je canvas (afbeeldingen, teksten 
en dergelijke) komen netjes in precies pas- 
sende onderverdelingen van die tabel terecht. 
Laten we dat even in de praktijk bekijken: 
We maken een nieuw document aan met 
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een canvas van 5ooxsoo pixels. 

Daarop plaatsen we een afbeelding en 
we bewaren het geheel als ‘fiets.png’ (Fi- 
guur 1). Selecteer nu de afbeelding door erop 
te klikken. 


Nu gaan we naar het INSERT-menu en kie- 
zen daar voor SLICE. 

De afbeelding wordt met een groen sausje 
overgoten en meteen zie je een aantal rode 
hulplijntjes verschijnen die het canvas in 


Roll-over Beethoven! 


ete m Hete en ORP ADE Nt eb [rd er SDAP AODS o 
Wo zeiechen | Select and move deche ke L__ Select andmove objects 
Figuur 4 Figuur 6 


Leuk dat je zo’n ‘slice’ kan maken, maar 
wat moet je daar nu mee? Je kan er bij- 
voorbeeld een roll-over mee maken. Een 
roll-over is een effect waardoor er op je web- 
site iets gebeurt als je met je muis op een 
bepaald object komt. Stel dat we willen dat 
onze bezoekers, als ze met hun muis over 
de afbeelding van die oude fiets glijden, 
daaronder de tekst te zien krijgen: ‘Dit is 
een oude fiets’. Dat doen we zo: 

Open het panel FRAMES en klik op het plus- 
teken onderaan om een nieuw frame aan 
te maken (Figuur 4). 

Klik op FRAME 2, zet in je werkbalk Toors 
het tekstgereedschap aan, klik vervolgens 
in het vakje onder de afbeelding (die je nu 
niet meer ziet, maar de slices zie je wel) en 
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Figuur 5 


tik daar de tekst in: ‘Dit is een oude fiets’ 

(Figuur 5). Na een klik op OK staat die tekst 
op het canvas. Verschuif die tekst eventu- 
eel tot hij helemaal goed staat en selecteer 
hem door erop te klikken. Nu maken we 
voor de tekst een nieuwe ‘slice’ aan via het 
menu INSERT en SLICE. De nieuwe indeling 
is meteen zichtbaar, als je tenminste de sli- 
ce-view niet hebt uitgezet op de werkbalk 
Toors. 

We hebben nu twee frames: in het eerste 
staat een afbeelding van een fiets, in het 
tweede een bijbehorende tekst. Nu moe- 
ten we beide nog met elkaar verbinden. 
Daarvoor klikken we in het panel FRAMES 
eerst weer op het eerste frame en vervol- 
gens op de afbeelding van de fiets. 

In het midden van die afbeelding zie je een 
klein ‘schietschijfje’. Dat is de zogenaam- 
de ‘Behavior hendel’. Daarmee kan je een 
bepaald gedrag toewijzen aan het object in 
kwestie. 

Zet je muispunt op die ‘hendel’ en sleep de 
‘slice’ waarin de tekst staat van daaruit naar 
het groene vakje onderaan. Je zal zien dat er 
een gekromd blauw lijntje wordt getrokken 
van de ‘hendel’ naar de linkerbovenhoek van 
de doel-slice, die bij Fireworks ‘Target’ wordt 
genoemd. Tegelijk floept er een dialoogbox- 
je open dat ‘Swap Image’ heet en waarmee 
je het frame kan kiezen dat aan de opdracht 
wordt gekoppeld (Figuur 6). Normaal staat 
het juiste frame (in ons geval Frame 2) al in- 
gevuld. 
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VOOR GEVORDERDEN D D 2) 


rechthoeken verdelen (Figuur 2). Het ‘Sli- 
ce’-object is hiermee aangemaakt. Onder- 
aan de werkbalk Toors kan je met de optie 
View de slices naar wens zichtbaar of on- 
zichtbaar maken (Figuur 3). 
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Figuur 7 


Klik op OK en klaar is Kees. Klik op de tab 
PREVIEW (of 2-Up) van je documentvenster 
en probeer maar uit. Zodra je met de muis- 
aanwijzer de afbeelding raakt, verschijnt 
onderaan de tekst (Figuur 7). 


VAKTAAL 


Animated gif: Een opeenvolging van gif-afbeeldingen 
waardoor een beweging ontstaat, volgens het principe 
van de animatiefilm. 


Frame: een afgebakende ruimte op je blad papier of 
webpagina, waarbinnen je bijvoorbeeld tekst of 
afbeeldingen kan laten verschijnen. 


Html: (Hypertext markup language) een soort taal die 
tekst, afbeeldingen, links enzovoort in webpagina's 
giet. 


JavaScript: Door Netscape ontwikkelde scriptingtaal 
waarmee html-pagina’s uitgebreid kunnen worden 
met interactief gedrag. Standaard wordt dit gedrag 
uitgevoerd aan de kant van de client, waarmee 
JavaScript te zien is als een sterk vereenvoudigd 
alternatief voor Java. 
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Je kan met het roll-overeffect nog andere din- 
gen doen, bijvoorbeeld afbeeldingen op elkaar 
stapelen. Als je met de muisaanwijzer over een 
afbeelding glijdt, verandert die in een andere af- 
beelding. Eigenlijk is het principe hetzelfde. La- 
ten we weer uitgaan van onze afbeelding van de 
fiets, waar we al een ‘slice’ over hebben gezet. 
We maken weer een tweede frame aan en gaan 
daar naartoe. 

We importeren hier nu een tweede afbeelding 


Salnct on 


Figuur 8 


Figuur 9 


ld KEK 


pelen kan ook 


„ax via FILE en IMPORT (Figuur 8). 
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TANGLE TOOL en daar een tekst of 
een tekening in maken, maar wij 
houden het bij een foto. Nu moe- 
ten we beide foto’s weer met elkaar 
verbinden. Dat gaat op dezelfde 
manier als eerder bij de tekst. 

Selecteer Frame 1 in het FRAME- 
panel, selecteer vervolgens de af- 
beelding van de fiets en versleep 
de ‘hendel’ een klein beetje. Me- 
teen zie je het blauwe lijntje weer 
verschijnen, maar deze keer ver- 
wijst het naar de linkerbovenhoek 


Verdubbel je plezier 


Een roll-over is op zich al een verrassend 
element op je site, maar dat wordt nog leu- 
ker als een muisbeweging op verschillende 
plaatsen op je pagina tegelijk iets laat ge- 
beuren. Ook dat kan: 

We halen onze ‘fiets.png’ weer boven, se- 


Fireworks - fiets.png 
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Figuur 11 
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lecteren het tweede frame en zetten onder 
de foto de tekst: “Waar heb ik mijn fiets nu 
toch gelaten?’ 

We zetten het ding op de gewenste plek en 
leggen er opnieuw een slice over (Figuur 11). 
Let erop hoe vernuftig Fireworks de kolom- 
men aanpast. 

Nu gaan we weer naar ons eerste frame, se- 
lecteren de afbeelding met de fiets en sle- 
pen nu de ‘hendel’ naar het tekstvak on- 
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van de eigen ‘slice’. En dat is precies wat we wil- 
len (Figuur 9). 

Ook nu weer verschijnt het Swap IMAGE-kadertje 
waarin we ‘Frame 2’ selecteren en op OK klik- 
ken. Het resultaat kunnen we bekijken in de 
PREVIEW-mode of beter nog in de 2-Ur-mode 
waar we beide naast elkaar zien (Figuur ro). 
Uiteraard kan je deze roll-overs weer heel een- 
voudig exporteren via Fire en EXPORT zoals we 
dat in de eerste aflevering al gedaan hebben. 
De html-file en alle bijbehorende bestanden ko- 
men dan netjes bij elkaar terecht. 


Waar heb ik nu toch mijn fiets gelaten? 
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deraan op dezelfde manier als we dat eer- 
der al gedaan hebben. Maak je geen zorgen 
over je eerste link: het blauwe lijntje daar- 
van verdwijnt wel, maar dat is maar tijde- 
lijk. 

Nadat je in de dialoogbox ‘Frame 2’ hebt ge- 
selecteerd en op OK hebt geklikt, staan de 
beide lijntjes er (Figuur 12). Nog even in 
PREVIEW controleren nadat we eerst de ‘sli- 
ce'-lijnen verborgen hebben via de werkbalk 
Toors en ja, hoor, hij doet het (Figuur 13)! 


Daar hangt wat aan vast 
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Figuur 14 


Wat heb ik nou 
an me fiets? 


Een bijzondere, maar heel handige toepas- 
sing van roll-overs is het maken van menu- 
balken. Ontzettend handig hoe je dat kan 
doen in Fireworks. Laten we een menu- 
balkje maken voor een site over fietstoeris- 
me. 

We beginnen met een nieuw document- 
venster waarin we met de RECTANGLE TOOL 
een mooie rechthoek tekenen. 

Dan gebruiken we de TEKST TOOL om daar 
de tekst ‘fietstoerisme’ in te plaatsen. We 
spelen een beetje met lettertype, -grootte 
en juiste plaats tot het er allemaal mooi uit- 
ziet. 

Dan selecteren we de tekst en leggen er een 
‘slice’ over via het menu INSERT (Figuur 16). 
Nu openen we in hetzelfde menu INSERT 
de optie Ser Por-Urp MENU, waarna we de 
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Figuur 16 


Roll-overs worden natuurlijk in de eerste 
plaats gebruikt als aantrekkelijke links. Je 
kan met je afbeeldingen en je animaties je 
bezoekers verleiden om naar een andere pa- 
gina te gaan. Dus moet je er ook een link 
aan kunnen verbinden. Laten we dat hier 
maar eens doen. 

Open het panel Ogjecr, kies als type IMAGE, 
vul het internetadres in van de pagina waar 
je naartoe wil (in ons geval: [ www.fiets.be | 
en eventueel een alternatieve tekst (Fiet- 
sersbond vzw). 

In het onderste vakje kies je NONE als je wil 
dat de nieuwe pagina in hetzelfde venster 
getoond wordt als de huidige. Wij kiezen 
echter voor _BLANK waarmee een nieuw ven- 
ster geopend wordt (Figuur 14). 

We bewaren ons png-bestand en kijken hoe 


Set Pop-Up Menu 
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Figuur 17 


gelijknamige dialoogbox zien verschijnen 
(Figuur 17). 

Hierin vul je bij ‘Tekst’ een voor een de ver- 
schillende mogelijkheden van je pop-up- 
menu in en bij Link de bijbehorende html- 
pagina. 

Klik daarna op het plusteken bovenaan en 
het item wordt toegevoegd aan je menu. 
Een item weer weghalen kan met het min- 


Set Pop-Up Menu 
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Figuur 18 
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het er zal uitzien in een browser. Dat kan 
via het menu FILE en PREVIEW IN BROWSER, 
maar nog eenvoudiger is het met de func- 
tietoets Fra. En kijk, alles werkt (Figuur 15). 


Set Pop-Up Menu 
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teken. Items verplaatsen kan heel makke- 
lijk door ze aan te klikken en ze naar de juis- 
te plek te slepen. 

Wil je meteen submenu’s maken, breng 
de items dan gewoon in zoals bij een hoofd- 
menu, selecteer ze en klik op de knop IN- 
DENT MENU bovenaan (Figuur 18). Je kan 
op die manier meerdere niveaus inbren- 
gen. Als je lijstje klaar is, klik je op NExT en 
zo kom je terecht in een pagina waar je het 
uitzicht van je menu kan bepalen: tekstei- 
genschappen, kleur, grootte. Onderaan zie 
je meteen een preview van het resultaat. Je 
kan dus experimenteren zoveel je maar wil 
(Figuur 19). Als je klaar bent, klik je op Fr- 
NISH, waarna het menu automatisch wordt 
aangemaakt. Als je nu de titel ‘“fietstoeris- 
me’ selecteert, zie je een rooster van blau- 
we lijntjes dat met een gebogen lijntje vast 
hangt aan de ‘hendel’ van de titeltekst. Dat 
rooster staat voor je menu en je kan het ver- 
plaatsen zoals je wil. Doorgaans komt het 
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links of rechts gelijnd onder de titel terecht 
(Figuur 20). Het resultaat bekijk je in de 
browser (met Fra) en dat ziet er lang niet 
slecht uit (Figuur 21). 

Om te begrijpen wat er nu eigenlijk op de 
achtergrond gebeurd is, moet je het auto- 
matisch aangemaakte html-bestand eens 


GRAFISCHE PROGRAMMA'S 


Firehand Lightning 
[ wwvw.firehand.com/lightning/index.html ] 


Flax 
[ www.goldshell.com/flax/main.htm ] 


FlickerFree Multimedia Products 
[ wvw.flickerfree.com | 


Insane 3D Flash Animator 
[ www.insanetools.com | 


Internet Character Animator 
[ www.parallelgraphics.com/products/ica | 


Internet Scene Assembler 
[ www.parallelgraphics.com/products/isa | 


Koolmoves 
[ www.koolmoves.com | 


LiveStage Professional 
[ www.totallyhip.com/hi/products/Isp/index.html | 


MagicSquare L3 
[ www.magicsquare.com | 


RealView 3D 
[ www.realview3d.com | 


Viscosity 
[ www.sonicfoundry.com/products/NewShow 
Product.asp?PID=274 | 


Macromedia Fireworks 
[ www.macromedia.com | 
[ www.macromedia.com/software/fireworks | 
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bekijken in een simpele teksteditor als Klad- 
blok of in een echte html-editor zoals Ho- 
meSite of Dreamweaver. Dan zie je pas waar- 
aan je ontsnapt bent. Voor het simpele 
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menuutje dat wij in enkele minuten in el- 
kaar gebokst hebben, genereerde Fireworks 
zo’n vijftig lijnen JavaScript! Begin dat eens 
zelf te programmeren! 
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Figuur 21 


Dat kleine beetje meer 


Wil je je pop-upmenu een nog wat professionelere look geven, dan moet je de items niet 
als html, maar als ‘Image’ laten bewaren. Wie goed heeft opgelet, heeft die mogelijkheid 
al gezien in het Ser Por-Up MENU. Als je voor IMAGE kiest, krijg je meteen de mogelijk- 
heid effecten toe te voegen aan de menuknoppen (Figuur 22). Kies er een uit en klik op 
FinisH. Bewaar het bestand en bekijk het resultaat met de browser. Dat ziet er nog een 


stuk professioneler uit (Figuur 

23). 
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Naar het net mm 
Dan rest ons alleen nog het hele ding 
op te slaan om het naar het net te kun- 
nen transfereren. Dat doen we alweer ze 
via het menu Fire en ExPoRT (Figuur __ 2 | 

. HTML Hi - 
24). We selecteren de locatie waar we HE ns: Le 
onze bestanden willen neerzetten en ge- r r 


ven de pagina een naam. Standaard 
krijgt de html-pagina dezelfde naam als 
het aangemaakte png-bestand, maar dat 
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kan je naar wens veranderen. Stel dat het de openingspagi- 
na is van je site, dan kan je daar het best ‘index.htm’ van ma- 
ken. Bij OPSLAAN ALS TYPE hoort natuurlijk HTML AND IMAGES, 
al kan je het bestand ook uitvoeren als een Flash-bestand of 
als een pagina voor een specifiek programma als Dream- 
weaver of Director. Bij html heb je de keuze om het bestand 
aan te maken als een volledige html-pagina, dan wel om 
alleen de code naar het Klembord te kopiëren zodat je die 
meteen in een reeds bestaande html-pagina kan plakken. Bij 
Srices ten slotte kies je voor EXPORT sLICES. Een klik op Or- 
SLAAN en je pagina met alle bijbehorende bestanden is klaar. 


De naam Wolfenstein zal : El Le 


ongetwijfeld een belletje doen 

rinkelen bij heel wat lezers… auoifenstein 
H&t was dan ook een klassieke 

ShOOPem up’ game. ef Le 
ID Software (maker van o.a. 

Quake en Doom) heeft net een poen 

vervolg op deze klassieker 
uitgebracht èn voor jouw 
favoriete computerblad 

5 special editions Return to 


Castle Wolfenstein gereserveerd. Lees snel verder 
en ontdek hoe jij zo'n exemplaar kan winnen! 


Vind je Fireworks 
te duur? 


Het zal moeilijk zijn om op de shareware- of freewaremarkt 
een programma te vinden dat dezelfde mogelijkheden biedt 
als Fireworks, vooral dan wat het automatisch genereren van 
allerlei soorten code betreft. Al zijn er wel een paar pro- 
gramma’s die dat ten dele doen. Wie echter niet bang is van 
een beetje knutselen en wat handwerk en zich bovendien wil 
verdiepen in code schrijven voor html en JavaScript, kan met 
goedkope programma’s ongetwijfeld even mooie resultaten 
behalen. In het kader ‘grafische programma’s’ vind je een 
lijstje met shareware grafische programma’s die je laten wer- 
ken met multimedia, animatie, teksteffecten in Flash, video, 
VRML, 3D, screensavers en nog veel meer. 

— Willy Schuyesmans — 


Het spel 


Als soldaat B.J. Blazkowicz moeifgijde 
Sttijd.aanbinden tegen het NazidDuitsland 
van TOAmLleinrich Hinamdler wilde oor 
log winnen door middel van occulte en ge- 
netische manipulatie. Je tegenstanders in 
die strijd zijn dan ook supersoldaten, zom- 
bies en genetisch gemuteerde wezens. Maar geen nood — jij ontpopt je 
natuurlijk als ultragetrainde soldaat. Ter info: het spel maakt gebruik van 
de verbeterde QUAKE III ArenaTM engine. 


Wat jij moet doen om zo’n unieke special 
edition te bemachtigen? Héél eenvoudig: 
antwoord voor 31 december op onze wed- 
strijdvraag… onze onschuldige hand maakt 
5 (vijf!) Clickx Magazine-lezers gelukkig. 


3D: Staat voor driedimensionaal, wat betekent dat voorwerpen en figu- 
ren diepte bevatten. Daardoor zien ze er veel realistischer uit. 


Flash: Een technologie die afbeeldingen van hoge kwaliteit met interac- 
tieve elementen weet te combineren, vooral bedoeld voor toepassingen 
op het internet. 


Freeware: Software die je gratis kan downloaden van het internet. 


Screensaver: Programma dat inbranden van het beeldscherm voor- 
komt. Wanneer de pc wel aanstaat maar niet gebruikt wordt, zet de 
screensaver steeds wisselende plaatjes op het beeldscherm. 
Tegenwoordig is dit programma niet meer nodig omdat het beeld- 
scherm al een eigen beveiliging heeft, maar voor het plezier wordt het 
veel gebruikt. 


Wat vind je (uiteraard) niet terug op de website van 
Clickx Magazine (wwvw.clickkmagazine.be)? 


massa's gekke computergeluiden die je kan downloaden 
Shareware: Software die je kan downloaden van het internet en die je 


gedurende een bepaalde periode gratis mag uitproberen. Daarna moet 
je ervoor betalen als je er verder mee wil blijven werken. 


VRML: (Virtual Reality Markup Language) Het biedt de mogelijkheid 
om driedimensionale werelden te creëren voor het World Wide Web. 
Met een speciaal daarvoor geschikte browser kan de gebruiker op 
ongeveer dezelfde wijze als een gewone Web-browser over het net 
navigeren. 


een inschrijfmogelijkheid voor het e-zine ‘eClickx’ 


een gratis download van de volledige versie van Windows XP 


Mail het correcte antwoord vóór 31 december naar 
clickxpromotie@mediaxis.be, of stuur een briefkaart naar 
Clickx magazine, Wedstrijd 4, Neerveldstraat 109, 1200 Brussel. 
Vergeet niet je adres en geboortedatum te vermelden! 


Je gegevens kunnen worden opgenomen in het adressenbestand van Clickx Magazine nv. 
Ze worden gebruikt om je op de hoogte te houden van onze publicaties en promoties en 
kunnen doorgegeven worden aan organismen die contractueel met ons verbonden zijn. 
Je kunt je gegevens inzien en eventueel laten verbeteren of verwijderen. 
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